<template>
    <div class="pagination">
        <!--:disabled不能点击-->
        <button :disabled="pageNo === 1" @click="getPageNoHandler(pageNo - 1)">上一页</button>
        <!--上-->
        <button v-if="(startNumAndEndNum.at(-1) as number) > 1" @click="getPageNoHandler(1)">1</button>
        <button v-if="(startNumAndEndNum.at(-1) as number) > 2">···</button>

        <!--中间部分-->
        <button
            v-for="(page, index) in startNumAndEndNum"
            :key="index"
            :class="{active: pageNo === page}"
            @click="getPageNoHandler(page)"
        >
            {{ page }}
        </button>

        <!--下-->
        <button v-if="(startNumAndEndNum.at(-1) as number) < totalPage - 1">···</button>
        <button v-if="(startNumAndEndNum.at(-1) as number) < totalPage" @click="getPageNoHandler(totalPage)">
            {{ totalPage }}
        </button>
        <button :disabled="pageNo === totalPage" @click="getPageNoHandler(pageNo + 1)">下一页</button>

        <button style="margin-left: 30px">共 {{ total }} 条</button>
    </div>
</template>

<script setup lang="ts">
import {computed} from 'vue'
import bus from '@/libs/bus'

const props = defineProps({
    pageNo: {
        type: Number,
        required: true
    },
    pageSize: {
        type: Number,
        required: true
    },
    total: {
        type: Number,
        required: true
    },
    continues: {
        type: Number,
        required: true
    }
})

//总页数
const totalPage = computed<number>(() => Math.ceil(props.total / props.pageSize)) //Math.ceil向上取整
//计算出连续的页码的起始数字与结束数字
const startNumAndEndNum = computed(() => {
    let start: number, end: number
    if (props.continues > totalPage.value) {
        start = 1
        end = totalPage.value
    } else {
        start = props.pageNo - Math.floor(props.continues / 2)
        end = props.pageNo + Math.floor(props.continues / 2)
        if (start < 1) {
            //start出现0或负数
            start = 1
            end = props.continues
        }
        if (end > totalPage.value) {
            //end比totalPage大
            end = totalPage.value
            start = totalPage.value - props.continues + 1
        }
    }
    let arr = [] //返回数组
    for (let i = start; i <= end; i++) {
        arr.push(i)
    }
    return arr
})

//获取下一页或上一页页码, 并返回
const getPageNoHandler = (pageNo: number) => {
    bus.emit('getPageNo', pageNo)
}
</script>

<style scoped lang="less">
.pagination {
    text-align: center;

    button {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: #606266;
        outline: none;
        border-radius: 2px;
        padding: 0 4px;
        vertical-align: top;
        display: inline-block;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        border: 0;

        &[disabled] {
            color: #c0c4cc;
            cursor: not-allowed;
        }

        &.active {
            cursor: not-allowed;
            background-color: #409eff;
            color: #fff;
        }
    }
}
</style>
